<template>
  <div class="line1">
    <div id="line1" class="" style="width: 90%;height:450px;"></div>
  </div>
</template>

<script>
  import echarts from 'echarts/lib/echarts';
  // 引入柱状图
  import 'echarts/lib/chart/bar';
  import 'echarts/lib/chart/line';
  import 'echarts/lib/component/title';
  import 'echarts/lib/component/legend';
  import 'echarts/lib/component/toolbox';
  import 'echarts/lib/component/markPoint';
  import 'echarts/lib/component/tooltip';

  export default {
    mounted() {
      this.myChart = echarts.init(document.getElementById('line1'));
      this.initData();
    },
    props: ['sevenDate', 'sevenDay'],
    methods: {
      initData() {
        const colors = ['#5793f3', '#675bba', '#d14a61'];
        const option = {
          title: {
            text: '最近一周文章发布数量',
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['新增文章']
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: this.sevenDay
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: [
            {
              name: '新增文章',
              type: 'line',
              data: this.sevenDate,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            }
          ]
        };
        this.myChart.setOption(option);
      }
    },
    watch: {
      sevenDate: function (){
          this.initData()
      },
      sevenDay: function (){
          this.initData()
      }
    }
  }
</script>

<style lang="less">
  @import '../style/mixin';

  .line1 {
    display: flex;
    justify-content: center;
  }
</style>
